/*
 * @Author: wangtao
 * @Date: 2021-05-27 14:08:24
 * @LastEditors: 汪滔
 * @LastEditTime: 2021-06-09 17:14:19
 * @Description: file content
 */
import React, { Component, Fragment } from 'react';
import { StyleSheet, View, Text, Image, TouchableOpacity } from 'react-native';
import { px2dp, screenWidth } from '@/styles';
import { iconBlackRight } from '@/images';

/**
 * @modifyAuthor kanglang
 * @description 新增车辆卡片
 * @createDate 2020/8/27
 */
export default class AddTruckBox extends Component {
  constructor(props) {
    super(props);
  }

    handleCert = () => {
      this.props.onHandleCert && this.props.onHandleCert();
    }

    render() {
      const { truckIcon, certType, titleOne, titleTwo } = this.props;
      return (
        <TouchableOpacity onPress={this.handleCert} style={styles.boxWrap}>
          <Image
            source={truckIcon}
            resizeMode='stretch'
            style={styles.truckImg}
          />
          <View style={styles.handleBtn}>
            <Text style={styles.certTypeStyle}>{certType}</Text>
            <Image source={iconBlackRight} style={{ width: px2dp(24), height: px2dp(24) }} />
          </View>
          <View style={styles.tipWrap}>
            <Text style={styles.titleStyle}>{titleOne}</Text>
            <Text style={styles.titleStyle}>{titleTwo}</Text>
          </View>
        </TouchableOpacity>
      );
    }
}
const styles = StyleSheet.create({
  boxWrap: {
    backgroundColor: '#F5F5F5',
    borderRadius: px2dp(8) * 2,
    width: px2dp(327) * 2,
    height: '100%',
    alignItems: 'center'
  },
  truckImg: {
    width: px2dp(239) * 2,
    height: px2dp(73) * 2,
    top: -35
  },
  handleBtn: {
    flexDirection: 'row',
    alignItems: 'center',
    top: -20
  },
  certTypeStyle: {
    color: '#343332',
    fontSize: px2dp(18) * 2
  },
  tipWrap: {
    alignItems: 'center',
    marginTop: px2dp(8) * 2,
    top: -20
  },
  titleStyle: {
    paddingLeft: px2dp(33.5) * 2,
    paddingRight: px2dp(33.5) * 2,
    color: '#999896',
    fontSize: px2dp(13) * 2
  }
});
